<template>
    <div class="shoppingCart">
        <div class="cart-main">
            <div class="cart-list-title">
                <div class="title">
                    购物袋
<!--                    <div class="stork-nav">-->
<!--                        <span class="iconfont icondaifahuo1"></span>-->
<!--                        <span class="text">选择配送地区查看库存</span>-->
<!--                        <span class="iconfont iconjiantou"></span>-->
<!--                    </div>-->
                </div>

            </div>
            <div class="cart-list-main">
                <div class="cart-list-left">
                    <div class="list-left-top">
                         <el-checkbox v-model="checkAll" @change="quanxuan">全选</el-checkbox>
                    </div>
                    <div class="cart-item" v-for="(item,index) in newCart" :key="index">
                        <div class="item-left">
                             <el-checkbox v-model="item.checked" @change="danxuan"></el-checkbox>
                        </div>
                        <div class="item-right">
                            <img :src="'http://tianwei888.oss-cn-beijing.aliyuncs.com' + item.cover" class="img">
                            <div class="item-details">
                                <div class="item-details-left">
                                    <div class="item-tags">新品</div>
                                    <div class="product-item-description">
                                        <p class="name">{{item.goods_name}}</p>
                                        <p>{{item.sku_name}}</p>
                                    </div>
                                    <div class="item-prc-box">单价:  ¥{{item.price}}</div>
                                    <div class="item-resemble">
                                         <el-input-number v-model="item.num"  @change="handleChange(item.num,item.id)" size="mini"></el-input-number>
                                    </div>
                                </div>
                               
                            </div>
                             <div class="item-details-right">
                                <div class="item-big-price">￥{{item.xiaoji}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-list-right">
                    <div class="cart-subtotal">
                        <span class="label">商品小计</span>
                        <span class="num">¥0.00</span>
                    </div>
                    <div class="cart-subtotal">
                        <span class="label">促销优惠</span>
                        <span class="num">-¥0.00</span>
                    </div>
                  <div class="flex center" style="align-items: center;">
                    <div class="left">
                      <p class="size"><span class="iconfont icondaifahuo1" style="margin-right:10px"></span>配送至</p>
                    </div>
                    <div class="right">
                      <el-cascader
                        class="widthSmall"
                        size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="addressChange">
                      </el-cascader>
                    </div>
                  </div>
                    <div class="cart-Total">
                        <div class="cart-subtotal">
                            <span class="label">购物袋合计</span>
                            <span class="num">¥ {{ heji }}</span>
                        </div>
                        <el-button class="btn" @click="jiesuan">立即结算(0)</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import request from "../../utils/request";
  import { regionData,CodeToText } from 'element-china-area-data'
export default{
    data(){
        return{
            num:1,
            checkAll:false,
            cart:[],
            form:{},
            options: regionData, //省市区数据
            selectedOptions:[],
        }
    },
    created() {
    },
    mounted() {
        this.getMyCart()
    },
    methods:{
        accMul(arg1,arg2){
            var m=0,
                s1=parseFloat(arg1).toFixed(2).toString(),
                s2=parseFloat(arg2).toFixed(2).toString();
            m+=s1.split(".")[1].length
            m+=s2.split(".")[1].length

            return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
        },
        accAdd(arg1,arg2){
            var r1,r2,m;
            try{r1=parseFloat(arg1).toFixed(2).toString().split(".")[1].length}catch(e){r1=0}
            try{r2=parseFloat(arg2).toFixed(2).toString().split(".")[1].length}catch(e){r2=0}
            m=Math.pow(10,Math.max(r1,r2))
            return (arg1*m+arg2*m)/m
        },
        jiesuan(){
            var data = this.newCart
            var id = [];
            for(let v of data){
                if(v.checked) id.push(v.id)
            }
            id = id.join(',')
            var address = `${this.form.provinceCode} ${this.form.cityCode} ${this.form.areaCode}`
            if(!this.form.provinceCode || !this.form.cityCode || !this.form.areaCode){
                this.$message({message:"请选择收货地址",type:'error'})
                return false
            }
            request.post('/orders/subOrder',{ids:id,address}).then(res=>{
                if(res.code == 200){
                    this.$message({message:"结算成功",type:'success'})
                    this.getMyCart()
                }else{
                    this.$message({message:res.msg,type:'error'})
                    this.getMyCart()
                }

            })
        },
        quanxuan(){
            console.log(this.checkAll)
            var data = this.cart
            for(let i in data){
                data[i].checked = this.checkAll
            }
        },
        danxuan(){
            var data = this.cart
            this.checkAll = !data.some(item=>item.checked == false)
        },
        handleChange(num,id){
            request.post('cart/updateCartNum',{id,num}).then(res=>{})
        },
        getMyCart(){
            var token = localStorage.getItem('token')
            if(!token){
                this.$router.push('/login');
                return false;
            }
            request.post('cart/myCart').then(res=>{
                if(res.code == 200){
                    for(let i in res.data){
                        res.data[i].xiaoji = this.accMul(res.data[i].price,res.data[i].num).toFixed(2)
                        res.data[i].checked = false
                    }
                    this.cart = res.data
                }
            })
        },
        addressChange(arr) {
            var _this = this;
            console.log(arr);
            console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
            _this.form.provinceCode = CodeToText[arr[0]];
            _this.form.cityCode = CodeToText[arr[1]];
            _this.form.areaCode = CodeToText[arr[2]];
        }
    },
    computed: {
        heji: function () {
            let total = 0;
            var cart = this.cart
            for(let v of this.cart){
                total = this.accAdd(this.accMul(v.price,v.num),total)
            }
            return total.toFixed(2)
        },
        newCart: function () {
            this.cart.forEach(item=>{
                item.xiaoji = this.accMul(item.price,item.num).toFixed(2)
            })
            return this.cart
        }
    }


}
</script>
<style lang="scss">
  .flex.center {
    align-items: center;
    justify-content: space-between;
    display: flex;
  }
.shoppingCart{
    padding-top: 60px;
    .cart-main{
        .cart-list-title{
            .title{
                font-weight: 700;
                font-size:36px;
                line-height: 54px;
                min-height: 56px;
                color: #111;
                display: block;
                width: 65.24%;
                position: relative;
                .stork-nav{
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    position: absolute;
                    white-space: nowrap;
                    right: 0;
                    top: 50%;
                    font-weight: 400;
                    transform: translateY(-50%);
                    font-size: 14px;
                    line-height: 40px;
                    .icondaifahuo1{
                        font-size: 18px;
                    }
                    .text{
                        margin: 0 10px;
                    }
                }
            }
        }
        .cart-list-main{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .cart-list-left{
                width: 65%;
                border-right: .0625rem solid #f5f5f5;
                min-height: 500px;
                max-height:700px;
                padding-right: 47px;
                overflow-y: auto;
                .list-left-top{
                     display: flex;
                    justify-content: space-between;
                    height:80px;
                    padding-top: 20px;
                }
                .cart-item{
                    padding-top: 30px;
                    display: flex;
                    align-items: center;
                    .item-left{
                        width: 50px;
                        justify-content: space-between;
                    }
                    .item-right{
                        flex: 1;
                        display: flex;
                        .img{
                            width: 140px;
                            background: #eee;
                            height: 140px;
                        }
                        .item-details{
                            flex: 1;
                            padding: 0 30px;
                            .item-tags{
                                font-size: 12px;
                                line-height: 20px;
                                min-height: 20px;
                                color: rgb(240, 127, 19);
                            }
                             p,.item-prc-box{
                                margin: 0;
                                font-size: 12px;
                                line-height: 20px;
                                color: #484848;
                                margin-top: 4px;
                            }
                            .item-prc-box{
                                margin-top: 8px;
                            }
                            .item-resemble{
                                margin-top: 4px;
                            }
                            .product-item-description{
                               
                                
                                .name{
                                    margin: 0;
                                    font-size: 12px;
                                    line-height: 20px;
                                    white-space: nowrap;
                                    font-weight: 700;
                                    color: #111;
                                    margin-top: 4px;
                                    margin-bottom: 12px;
                                }
                            }
                        }
                        .item-details-right{
                            width: auto;
                            .item-big-price{
                                font-size: 14px;
                                line-height: 24px;
                                font-weight: 700;
                                width: 100%;
                                text-align: right;
                                word-break: break-all;
                                color: #111;
                            }
                        }
                    }
                }
            }
            .cart-list-right{
                width: 32.25%;
                // float: right;
                // position: sticky;
                // right: 6.25rem;
                // top: 2.625rem;
                // margin-top: .9375rem;
                // padding-bottom: 7.75rem;
                transition: all .3s;
                .cart-subtotal{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                    align-items: center;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 24px;
                    color: #111;
                }
                .cart-Total{
                    margin-top: 40px;
                    padding-top: 40px;
                    border-top: 1px solid #aeaeae;
                    .num{
                        font-size: 24px;
                        font-weight: 600;
                    }
                    .btn{
                        margin-top: 40px;
                        width: 100%;
                        height: 50px;
                        border-radius: 40px;
                    }
                }
            }
        }
    }
}
</style>